<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>分拣</title>
    <link href="/page/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link href="/page/dist/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="/page/css/index.css" rel="stylesheet"/>
    <link rel="shortcut icon" href="#"/>
    <script type="text/javascript" src="/page/dist/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="/page/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/page/dist/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="/page/dist/js/i18n/defaults-zh_CN.min.js"></script>
    <script type="text/javascript" src="/page/js/socket/socket.io.js"></script>
</head>
<body>
<div class="container">
    <div class="row"></div>
    <div class="row">
        <form id="form-group-select" class="form-inline">
            <div class="form-group">
                <label for="select-id" class="control-label">分类</label>
                <select id="select-id" class="selectpicker select-info" data-live-search="true">
                    <option selected class="opt-inf"></option>
                    <option value="1" class="opt-inf">苹果</option>
                    <option value="2" class="opt-inf">梨子</option>
                    <option value="3" class="opt-inf">香蕉</option>
                    <option value="4" class="opt-inf">红龙果</option>
                    <option value="5" class="opt-inf">橘子</option>
                </select>
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">重量:</label>
                <input type="text" class="form-control" id="recipient-name">
                <label for="recipient-name" class="control-label">斤</label>
            </div>
            <button type="button" class="btn btn-primary">分拣</button>
        </form>
    </div>
    <div class="row">
        <div id="test-info"></div>
        <input type="hidden" name="upOrDownPolicy[clientId]" th:value="${clientId}" id="client-id"/>
    </div>
</div>
</body>
<script type="text/javascript" src="/page/js/common.js"></script>
<script type="text/javascript">
    $(function () {
        $("#select-id").selectpicker("refresh");
        //render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局，这将非常有用。
        $('#select-id').selectpicker('render');
        $(".selectpicker").on("changed.bs.select", function (e) {
            console.log($(this).val());
        });
    });
    const socket = io.connect(socket_url + "?clientId=" + $("#client-id").val(), {transports: ["websocket"]});
    //监听服务器连接事件
    socket.on("connect", function () {
        const jsonObj = {
            "clientId": 100,
            "targetId": 200,
            "type": "info",
            "data": {"id": "123", "name": "tom", "age": 20}
        };
        // socket.emit('messageEventInfo', jsonObj);
        console.log("socket server connected...");
    });

    //监听服务器关闭服务事件
    socket.on("disconnect", function () {
        console.log("socket server disconnect...");
    });

    //监听服务器错误
    socket.on("connect_error", function (error) {
        console.log("socket server error:" + JSON.stringify(error));
    });

    socket.on("testInfo", function (data) {
        $('#test-info').text(JSON.stringify(data));
    });
</script>
</html>